<template>
  <div class="">
    <el-card class="box-card"
             shadow='hover'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{'name':'Classes' }">班级管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{'name':'Students' }">学生管理</el-breadcrumb-item>

      </el-breadcrumb>

      <el-row :gutter="110">
        <el-col :span='2'>
          <el-button type="primary"
                     @click="dialogVisible = true"
                     size="small"><i class="el-icon-plus"></i>添加学生</el-button>
        </el-col>
        <el-col :span='22'>
          <el-button type="primary"
                     size="small"><i class="el-icon-delete"></i>批量删除</el-button>
        </el-col>

      </el-row>
      <el-table :data="classData"
                class='class-table'
                stripe
                border>
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column type="index"
                         width="60"
                         label="序 号"
                         align="center">
        </el-table-column>
        <el-table-column width="60"
                         label="班级名称"
                         align="center">
        </el-table-column>
        <el-table-column label="操 作"
                         align="center"
                         width="200">
          <template slot="header"
                    slot-scope="scope">
            {{scope.row}}
            <el-input v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索" />
          </template>
          <template slot-scope="scope">
            <el-button type="warning"
                       size="mini"
                       @click='editSinger(scope.row)'>修改</el-button>
            <el-button type="danger"
                       size="mini"
                       @click='handleDelete(scope.row.id)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹框区 -->
      <!-- 添加歌手 -->
      <el-dialog title="添加歌手"
                 :visible.sync="dialogVisible"
                 width="400px"
                 center>
        <!-- 对话框主体 -->
        <div class="dialog-info">
          <el-form :model="singerForm"
                   ref='singerForm'
                   label-width="80px"
                   :rules="singerRules">
            <el-form-item label="歌手名"
                          size="mini"
                          prop="name">
              <el-input v-model="singerForm.name"
                        placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="性 别"
                          size="mini"
                          prop="sex">
              <el-radio-group v-model="singerForm.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop='birth'
                          label="生日"
                          size="mini">
              <el-date-picker type='date'
                              placeholder="选择日期"
                              v-model="singerForm.birth"
                              style="width:100%"></el-date-picker>

            </el-form-item>
            <el-form-item prop='location'
                          label="地区"
                          size="mini">
              <el-input v-model="singerForm.location"
                        placeholder="地区"></el-input>

            </el-form-item>
            <el-form-item prop='introduction'
                          label="简介"
                          size="mini">
              <el-input v-model="singerForm.introduction"
                        placeholder="简介"
                        type="textarea"
                        autosize></el-input>

            </el-form-item>

          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改歌手对话框 -->
      <el-dialog title="修改歌手"
                 :visible.sync="editDialogVisible"
                 width="400px"
                 center>
        <!-- 对话框主体 -->
        <div class="dialog-info">
          <el-form :model="singerForm"
                   ref='editSingerForm'
                   label-width="80px"
                   :rules="singerRules">
            <el-form-item label="歌手名"
                          size="mini"
                          prop="name">
              <el-input v-model="singerForm.name"
                        placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="性 别"
                          size="mini"
                          prop="sex">
              <el-radio-group v-model="singerForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop='birth'
                          label="生日"
                          size="mini">
              <el-date-picker type='date'
                              placeholder="选择日期"
                              v-model="singerForm.birth"
                              style="width:100%"></el-date-picker>

            </el-form-item>
            <el-form-item prop='location'
                          label="地区"
                          size="mini">
              <el-input v-model="singerForm.location"
                        placeholder="地区"></el-input>

            </el-form-item>
            <el-form-item prop='introduction'
                          label="简介"
                          size="mini">
              <el-input v-model="singerForm.introduction"
                        placeholder="简介"
                        type="textarea"
                        autosize></el-input>

            </el-form-item>

          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getClassesInfo } from '../../api/apiRequest'

export default {
  data () {
    return {
      dialogVisible: false,
      singerForm: {
        name: '',
        sex: '',
        birth: '',
        location: '',
        introduction: ''
      },
      singerRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择一个', trigger: 'change' }
        ]
      },
      classData: [],
      tempsingerData: [],
      //分页区
      total: 0,
      page: 1,
      page_size: 5,
      //过滤区
      search: '',
      //排序区
      ordering: '',
      //修改歌手对话框
      editDialogVisible: false,
      singerID: 0,
      //批量删除区
      collection: []
    };
  },
  mounted () {
    this.getClassesData()
  },


  methods: {
    //获取班级数据
    async getClassesData () {
      const { data: res } = await getClassesInfo()
      this.classData = res

    }

  }
}
</script>

<style lang='sass' scoped>
.add-singer
  margin-top: 1rem
.class-table
  width: 80%
  margin-top: 1rem
.el-icon-plus
  padding-right: .3rem
.el-pagination
  margin-left: 20rem
  margin-top: 1rem
.singer-introduction
  height: 100px
  overflow: scroll
.el-upload
  .update-picture
    margin-top: .5rem
.el-row
  margin: 2rem 0
  .el-col
    border-radius: 4px
    .el-icon-delete
      margin-right: .5rem
</style>